<template>
  <div class="specificltem-content">
    <a-row>
      <a-col :span="24">
        <a-spin :spinning="!isStepShow">
          <div class="echart-item">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>题目步骤分析(按照时间范围)</span>
              <div
                class="select-date"
                style="float: right; margin-right: 10px; width: 260px"
              >
                <a-range-picker v-model="stepDate" @change="stepDateOnChange" />
              </div>
              <div class="tab-content">
                <div class="tab">
                  <a-radio-group v-model="stepTabValue" button-style="solid">
                    <a-radio-button value="rightRank"> 正确率 </a-radio-button>
                    <a-radio-button value="wrongRank"> 错误率 </a-radio-button>
                    <a-radio-button value="fatalErrRank">
                      严重错误率
                    </a-radio-button>
                  </a-radio-group>
                </div>
                <div class="tab-box" v-if="stepTabValue === 'rightRank'">
                  <baseRank
                    rankType="percent"
                    :data="rightRankData"
                    v-if="isStepShow"
                  />
                </div>
                <div class="tab-box" v-if="stepTabValue === 'wrongRank'">
                  <baseRank
                    rankType="percent"
                    :data="wrongRankData"
                    v-if="isStepShow"
                  />
                </div>
                <div class="tab-box" v-if="stepTabValue === 'fatalErrRank'">
                  <baseRank
                    rankType="percent"
                    :data="fatalErrRankData"
                    v-if="isStepShow"
                  />
                </div>
              </div>
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-spin :spinning="false">
          <div class="echart-item">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>题目步骤错误分析(按照时间范围)</span>
            </div>
            <div class="select-content">
              <a-range-picker
                style="width: 240px; margin-right: 15px"
                v-model="stepErrorDate"
                @change="stepErrorDateOnChange"
              />
              <a-button type="primary" @click="selectQuestion('stepError')"
                >选择题目步骤</a-button
              >
              <div class="step-name">步骤内容：{{ stepName }}</div>
            </div>
            <div class="select-pie">
              <a-row :gutter="20">
                <a-col :span="12">
                  <basePie
                    :data="wrongPieChartDatas"
                    name="普通错误"
                    v-if="wrongPieChartDatas.length > 0"
                  />
                  <a-empty style="margin: 48px 0" v-else />
                </a-col>
                <a-col :span="12">
                  <basePie
                    :data="fatalPieChartDatas"
                    name="严重错误"
                    v-if="fatalPieChartDatas.length > 0"
                  />
                  <a-empty style="margin: 48px 0" v-else />
                </a-col>
              </a-row>
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-spin :spinning="false">
          <div class="echart-item" style="height:550px;">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>题目步骤考试用时分析(按照时间范围)</span>
            </div>
            <div class="right-rank-content" style="margin:20px 0px 0px 0px;">
                <a-range-picker
                  v-model="sectionStepDate"
                  @change="timeStepOnChange"
                  style="width:240px;"
                />
                <a-button type="primary" @click="selectQuestion('useTime')">选择题目步骤</a-button>
            </div>
            <div class="step-name">步骤内容：{{ timeStepName }}</div>
            <div class="select-bar">
              <stepTimeBar id="echartStep" :questionTimeData="stepTimeData"/>
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>
    <a-row :gutter="20">
      <a-col :span="12">
        <a-spin :spinning="false">
          <div class="echart-item" style="height:550px">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>题目考试用时分析(按照时间范围)</span>
            </div>
            <div class="right-rank-content" style="margin:20px 0px 0px 0px;">
                <a-range-picker
                  v-model="sectionQuestionDate"
                  @change="timeQuestionOnChange"
                  style="width:240px;"
                />
                <a-button type="primary" @click="questionTimeSelect(1)"
                >选择题目</a-button>
            </div>
            <div class="step-name">题目内容：{{ questionName }}</div>
            <div class="select-bar">
              <questionTimeBar :questionTimeData="questionTimeObj" />
            </div>
          </div>
        </a-spin>
      </a-col>
      <a-col :span="12">
        <a-spin :spinning="false">
          <div class="echart-item" style="height:550px">
            <div class="echart-title">
              <a-icon type="line-chart" />
              <span>车间题目正确率排行(按照时间范围)</span>
            </div>
            <div class="right-rank-content" style="margin:20px 0px 10px 34px;">
                <a-range-picker
                  v-model="sectionQuestionRightDate"
                  @change="timeRightQuestionOnChange"
                  style="width:240px;"
                />
                <a-button type="primary" @click="questionTimeSelect(2)"
                >选择题目</a-button>
            </div>
            <div class="step-name" style="margin-left:34px;">题目内容：{{ questionName2 }}</div>
            <div class="rank-content">
               <examRank :rankList="questionRightData" />
            </div>
          </div>
        </a-spin>
      </a-col>
    </a-row>
    <selectQuestionStep
      @selectInform="selectInform"
      :questionStepVisible="questionStepVisible"
      @closeFunc="questionStepVisible = false"
    />
    <selectQuestion
      @submitInform="submitInform"
      :questionVisible="questionVisible"
      :questionArr="[]"
      @closeFunc="questionVisible = false"
    />
  </div>
</template>

<script>
import {
  stepStates,
  stepErrorDes,
  sectionQuestionInfo,
  sectionQuestionRightRank,
  sectionStepRightInfo
} from "@/api/dataAnalysis";
import { getSpecificName } from "@/assets/js/utils";
import questionDetail from "@/assets/json/questionDetail.js";
import {getQuestionDetail} from "@/assets/js/utils.js";
import baseRank from "components/configuration/home/baseEcharts/selectRanking";
import selectQuestionStep from "components/base/questionStepSelect";
import basePie from "components/configuration/home/baseEcharts/basePie";
import questionTimeBar from "components/configuration/home/baseEcharts/questionTimeBar";
import stepTimeBar from "components/configuration/home/baseEcharts/questionTimeBar";
import examRank from "components/configuration/home/baseEcharts/examRank";
import selectQuestion from "components/base/selectQuestion";
import questionAllList from "@/assets/json/questionList.js";
import moment from 'moment';
export default {
  props: {
    section: {
      type: String,
      default: "",
    },
  },
  components: {
    baseRank,
    selectQuestionStep,
    basePie,
    questionTimeBar,
    stepTimeBar,
    examRank,
    selectQuestion
  },
  data() {
    return {
      questionName:'',
      questionName2:'',
      selectQuestionId:1,
      selectQuestionId2:1,
      questionVisible:false,
      selectModelType:1,
      selectStepType:'',
      stepDate: [moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      isStepShow: false,
      isShow:false,
      isStepTimeShow:false,
      rightRankData: [],
      wrongRankData: [],
      fatalErrRankData: [],
      stepTabValue: "rightRank",
      stepErrorDate: [moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      questionStepVisible: false, //选择题目弹框
      stepName: "",
      timeStepName:"xxx",
      stepArr: [
        {
          questionId: 3,
          stepId: 1,
        },
      ],
      wrongPieChartDatas: [],
      fatalPieChartDatas: [],
      sectionQuestionDate:[moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      questionTimeObj:{
        dateData:["最短用时","最长用时","平均用时"],
        timeData:[]
      },
      sectionQuestionRightDate:[moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      questionRightData:[],//车间题目正确率排行
      sectionStepDate:[moment(new Date()).subtract(1,'months').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')],
      stepTimeData:{
        dateData:["最短用时","最长用时","平均用时"],
        timeData:[]
      }
    };
  },
  mounted() {
    this.stepStatesData();
    this.stepName = this.dealQuestionData(this.stepArr)[0].Key;
    this.timeStepName = this.dealQuestionData(this.stepArr)[0].Key;
    this.getInitQuestionName()//获取默认题目名称
    this.stepErrorDesData();
    this.sectionQuestionInfoData();
    this.sectionQuestionRightRankData()
    this.sectionStepRightInfoData()
  },
  methods: {
    //获取默认的题目名称
    getInitQuestionName(){
      var questionArr = questionAllList()
      questionArr.forEach(item =>{
        if(item.id === this.selectQuestionId){
          this.questionName = item.question
          this.questionName2 = item.question
        }
      })
    },
    questionTimeSelect(type){
      this.selectModelType = type
      this.questionVisible = true; 
    },
    submitInform(val) {
      if(this.selectModelType ===1){
        this.selectQuestionId = val.id
        this.questionName = val.question
        this.sectionQuestionInfoData()//站段时间范围内某一项考试时，最短用时，最长用时和平均用时
      }
      if(this.selectModelType ===2){
        this.selectQuestionId2 = val.id
        this.questionName2 = val.question
        this.sectionQuestionRightRankData()
      }
      this.questionVisible = false;   
    },
    //站段时间范围内某一项下的某一步考试时，最短用时，最长用时和平均用时
   timeStepOnChange(date, dateString){
      this.sectionStepDate = dateString
      this.stepArr[0].questionId = 1
      this.stepArr[0].stepId = 1
      this.sectionStepRightInfoData()
    },
    sectionStepRightInfoData(){
      this.isStepTimeShow = false
      sectionStepRightInfo({
        section: this.section,
        startTime: this.sectionStepDate[0],
        endTime: this.sectionStepDate[1],
        questionId: this.stepArr[0].questionId,
        stepId: this.stepArr[0].stepId,
      })
        .then((res) => {
          if (res.data) {
            const arrTime = []
            for (const key in res.data) {
                arrTime.push((res.data[key]/3600).toFixed(3))
            }
            this.stepTimeData.timeData = JSON.parse(JSON.stringify(arrTime));
          }   
          //console.log(this.stepTimeData)
          this.isStepTimeShow = true
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },

    ////
    //段下时间范围内具体某一项车间正确率排行
    timeRightQuestionOnChange(date, dateString){
      this.sectionQuestionRightDate = dateString
      this.sectionQuestionRightRankData()
    },
    sectionQuestionRightRankData(){
      sectionQuestionRightRank({
        section: this.section,
        startTime: this.sectionQuestionRightDate[0],
        endTime: this.sectionQuestionRightDate[1],
        questionId:this.selectQuestionId2,
      })
        .then((res) => {
          if (res.data) {
           var arrRank =[]
            res.data.histogram.forEach((item)=>{
              arrRank.push({
                wordName:item.Key,
                percent:Math.floor(item.Data1*100)
              })
            })
            this.questionRightData = arrRank
          }else {
            this.questionRightData =[]
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    /////
    //站段时间范围内某一项考试时，最短用时，最长用时和平均用时
    timeQuestionOnChange(date, dateString){
      this.sectionQuestionDate = dateString
      this.sectionQuestionInfoData()
    },
    sectionQuestionInfoData(){
      this.isShow = false
      sectionQuestionInfo({
        section: this.section,
        startTime: this.sectionQuestionDate[0],
        endTime: this.sectionQuestionDate[1],
        questionId:this.selectQuestionId,
      })
        .then((res) => {
          if (res.data) {
            var arrType = []
            var arrTime = []
            for (const key in res.data) {
                arrTime.push((res.data[key]/3600).toFixed(3))
            }
            this.questionTimeObj.timeData = JSON.parse(JSON.stringify(arrTime));
          }   
          this.isShow = true
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },

    /////////
    selectQuestion(type) {
      this.selectStepType = type
      this.questionStepVisible = true;
    },
    selectInform(val) {
      this.stepArr[0] = val;
      this.questionStepVisible = false;
      if(this.selectStepType === 'stepError'){
        this.stepName = this.dealQuestionData(this.stepArr)[0].Key;
        this.stepErrorDesData();
      }
      if(this.selectStepType === 'useTime'){
        this.timeStepName = this.dealQuestionData(this.stepArr)[0].Key;
        this.sectionStepRightInfoData()
      }
    },
    stepErrorDateOnChange(date, dateString) {
      this.stepErrorDate = dateString;
      this.stepArr[0].questionId = 1
      this.stepArr[0].stepId = 1
      this.stepErrorDesData();
    },
    stepErrorDesData() {
      stepErrorDes({
        section: this.section,
        startTime: this.stepErrorDate[0],
        endTime: this.stepErrorDate[1],
        questionId: this.stepArr[0].questionId,
        stepId: this.stepArr[0].stepId,
      })
        .then((res) => {
          if (res.data.wrongPieChartDatas) {
            var arr = [];
            res.data.wrongPieChartDatas.forEach((item) => {
              arr.push({
                value: item.Data1,
                name: item.Key,
              });
            });
            this.wrongPieChartDatas = arr;
          } else {
            this.wrongPieChartDatas = [];
          }
          if (res.data.fatalPieChartDatas) {
            var arr2 = [];
            res.data.fatalPieChartDatas.forEach((item) => {
              arr2.push({
                value: item.Data1,
                name: item.Key,
              });
            });
            this.fatalPieChartDatas = arr2;
          } else {
            this.fatalPieChartDatas = [];
          }
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    stepDateOnChange(date, dateString) {
      this.stepDate = dateString;
      this.stepStatesData();
    },
    stepStatesData() {
      this.isStepShow = false;
      stepStates({
        section: this.section,
        startTime: this.stepDate[0],
        endTime: this.stepDate[1],
      })
        .then((res) => {
          if (res.data) {
            this.rightRankData = this.dealQuestionData(res.data.rightRank);
            this.wrongRankData = this.dealQuestionData(res.data.wrongRank);
            this.fatalErrRankData = this.dealQuestionData(
              res.data.fatalErrRank
            );
          } else {
            this.rightRankData =[]
            this.wrongRankData=[]
            this.fatalErrRankData=[]
          }
          this.isStepShow = true;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    dealQuestionData(data) {
      if(data){
        var arrNode = [];
        data.forEach((item) => {
          var questionDetailList = getQuestionDetail(item.questionId);  //questionDetail();
          var nodeDetail = getSpecificName(
            questionDetailList,
            item.stepId.toString(),
            item.questionId
          );
          item.nodeDetail = nodeDetail;
          item.nodeDetail[0].parentAllNode.push(item.nodeDetail[0].nodeContent);
          arrNode.push({
            Data1: (item.data1 * 100).toFixed(3),
            Key: item.nodeDetail[0].parentAllNode.join("——>"),
          });
        });
        return arrNode;
      } else {
        return []
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.echarts-content {
  .echart-title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333;
    overflow: hidden;
    width: 100%;

    span {
      margin-left: 10px;
    }
  }
}

.echart-item {
  height: 500px;
  margin-bottom: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  box-sizing: border-box;
}

.tab-content {
  margin-top: 15px;

  .tab {
    text-align: left;
  }

  .tab-box {
    margin-top: 20px;
  }
}

.select-content {
  margin-top: 20px;
}

.step-name {
  margin-top: 20px;
}
.right-rank-content {
  display:flex;
  justify-content:flex-start;
  button {
    margin-left:15px;
  }
}
</style>
